<template>

	<swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx"
		@change="onSwiperChange">
		<swiper-item v-for="(item, index) of dataInfo.headImgs" :key="index">
			<view class="goods_info_box" :class="{ active: swiperIndex == index }">
				<!-- <image class="goods_image" :src="item" mode="aspectFit"></image> -->
				<image class="goods_image" :src="item.url" mode="widthFix"></image>
				<!-- <view class="goods_info">
					<view class="goods_name">{{dataInfo.goodsName}}</view>
					<view class="price_box">
						<view class="price">{{dataInfo.goodsPrice}}</view>
						<view class="store_price">{{dataInfo.priceShop}}</view>
					</view>
					<view class="poster_info">
						<view class="info">
							<view>长按识别二维码访问</view>
							<text>{{"App平台"}}</text>
						</view>
						<image class="poster_code_image" :src="dataInfo.recommendCodeGoods" mode="aspectFit">
						</image>
					</view>
				</view> -->
			</view>
		</swiper-item>
	</swiper>

</template>


<script>
export default {
    data() {
        return {
            active: 0
        };
    },
    props: {
       swiperIndex: {
       	type: [Number, String],
       	default: 0
       },
       // 当前选中
       dataInfo: {
       	type: Object,
       	default: function() {
       		return {
       
       
       		};
       	}
       },
    },
    methods: {
		onSwiperChange(e) {
		
		
			this.$emit("change", e);
		
		},
    }
};

</script>

<style lang="scss" scoped>
	@import './mixin.scss';

	.poster_swiper {
		height: 900rpx;
		width: 100%;

		swiper-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.goods_info_box {
				width: 95%;
				// height: 90%;
				transform: scale(0.88);
				transition: all 0.4s;
				position: relative;
				overflow: hidden;
				background-color: #FFFFFF;

				&.active {
					transform: scale(1);
				}

				.goods_image {
					width: 100%;
					// height: calc(100vw - 220rpx);
				}

				.goods_info {
					padding: 24rpx;

					.goods_name {
						color: #333;
						font-size: 30rpx;
						@include bov(2);
					}

					.price_box {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						.price {
							font-size: 38rpx;
							color: red;
						}

						.store_price {
							margin-left: 30rpx;
							font-size: 26rpx;
							color: #999;
							text-decoration: line-through;
						}
					}

					.poster_info {
						border-top: 2rpx solid #f1f1f1;
						padding-top: 24rpx;
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.info {
							display: flex;
							flex-direction: column;

							view {
								color: #333;
								font-size: 28rpx;
							}

							text {
								color: #999;
								font-size: 24rpx;
								margin-top: 20rpx;
							}
						}

						.poster_code_image {
							width: 170rpx;
							height: 170rpx;
							flex-shrink: 0;
						}
					}
				}
			}
		}
	}

	.share_save_box {
		position: fixed;
		bottom: calc((100vh - 950rpx - 240rpx) / 4);
		left: 0;
		z-index: 6;
		width: 100%;
		display: flex;
		justify-content: space-around;

		button {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: transparent;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 30rpx;
			left: 50%;
			transform: translateX(-50%);

		}
	}
</style>